<template>
    <div class="header">
        <el-row>
            <el-col :span="21"><div class="grid-content head_log">个人网站</div></el-col>
            <el-col :span="1">
                <div class="grid-content">
                    <el-button type="text" @click="showModel">发布文章</el-button>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content">
                   <router-link to="/loging" class="Jump" v-if="!isLoging">登录</router-link>
                   <span class="userA" v-if="isLoging">{{name}}</span>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content">
                    <router-link to="/register" class="Jump">注册</router-link>
                </div>
            </el-col>
        </el-row>
        <Model :dialogFormVisible='dialogFormVisible' v-on:childByValue='childByValue'/>
    </div>
</template>

<script>
import { mapState ,mapMutations,mapActions} from 'vuex';
import { ADD_NEWS } from '../mutation-types';
import Model from '../components/Model';
import url from '../serviceAPI.config';
import axios from 'axios';
    export default {
        name:'Header',
        data() {
            return {
                name:'',
                dialogFormVisible:false
            }
        },
        computed:{
            ...mapState(['userNames','isLoging'])
        },
        updated(){
          this.name = localStorage.name;
        },
        mounted(){
            this.addContentToState();
        },
        methods:{
            ...mapMutations({
                addNews:'ADD_NEWS'
            }),
            ...mapActions(['addContent','addContentToState']),
            showModel(){
              this.dialogFormVisible = !this.dialogFormVisible;
            },
            childByValue(data){
                // this.addNews(data);

                this.addContent(data);
                this.dialogFormVisible = false;
            }
            
        },
        components:{
            Model
        }
    }
</script>

<style scoped lang='scss'>
 .el-col{
     .grid-content{
         text-align: center;
         .Jump{
             color: #fff;
             text-decoration: none;
         }
         .userA{
             color: rgb(25, 28, 201);
         }
     }
     .head_log{
         text-indent: 30px;
          text-align: start;
         font-size: 24px;
         color: #73ff40;
     }
     .el-button--text{
         color: #73ff40;
     }
 }
</style>